<template>
  <div>
    <div class="nav">
      <van-icon name="arrow-left" @click="()=>{this.$router.go(-1)}" />
      <span>个人信息</span>
    </div>

    <van-cell-group>
      <van-cell-group>
        <van-field
          v-model="form.phone"
          disabled
          label="电话"
          type="textarea"
          placeholder="填写电话"
          rows="1"
          autosize
        />
      </van-cell-group>
      <van-field
        v-model="form.username"
        label="学生姓名"
        type="textarea"
        placeholder="填写姓名"
        rows="1"
        autosize
        disabled
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="form.age"
        label="年龄"
        type="textarea"
        @click="showPickerAge = true"
        placeholder="填写年龄"
        rows="1"
        autosize
      />
    </van-cell-group>

    <van-popup v-model="showPickerAge" position="bottom">
      <van-picker
        show-toolbar
        :columns="ageArr"
        @cancel="showPickerAge = false"
        @confirm="onConfirmClass"
      />
    </van-popup>

    <van-cell-group class="rad">
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <span>性别</span>
        </div>

        <van-radio-group v-model="form.sex" style="display:flex;">
          <van-radio name="男" style="margin-right:5px;">男</van-radio>
          <van-radio name="女" style="margin-left:5px;">女</van-radio>
        </van-radio-group>
      </div>
    </van-cell-group>

    <!-- <van-cell-group style="margin-top: 5px;">
      <van-field
        v-model="form.password"
        label="密码"
        type="password"
        placeholder="填写密码"
        rows="1"
        autosize
      />
    </van-cell-group>-->

    <van-field
      readonly
      clickable
      label="班级"
      :value="form.className"
      placeholder="选择班级"
      @click="showPickerClass = true"
      style="margin-top:5px;"
      disabled
    />

    <!-- <van-popup v-model="showPickerClass" position="bottom">
      <van-picker
        show-toolbar
        :columns="classArr"
        @cancel="showPickerClass = false"
        @confirm="onConfirmClass"
      />
    </van-popup>-->

    <van-field
      readonly
      clickable
      label="学历"
      :value="form.education"
      placeholder="选择学历"
      @click="showPicker = true"
    />

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>

    <van-cell-group>
      <van-field
        v-model="form.nativePlace"
        label="籍贯"
        type="textarea"
        placeholder="填写籍贯"
        rows="1"
        autosize
      />
    </van-cell-group>

    <van-button type="primary" size="large" style="margin-top: 20px;" @click="onSubmit">保存修改</van-button>
  </div>
</template>
<script>
import { edit } from "@/API/user.js";
import { Dialog } from "vant";
import axios from "axios";
export default {
  created() {
    this.form = this.$store.state.userInfo;
    console.log(this.form);

    for (let i = 18; i <= 30; i++) {
      this.ageArr.push(i);
    }
  },
  data() {
    return {
      form: {
        username: "", //学生姓名
        password: "", //密码
        classId: "", //班级ID
        className: "", //所在班级
        education: "", //学历
        phone: "", //电话
        age: "", //年龄
        sex: "", //性别
        nativePlace: "", //籍贯
        studentId: "" //学生ID
      },
      showPickerAge: false,
      showPicker: false,
      columns: ["高中", "大专", "一本", "二本"],
      ageArr: []
    };
  },
  methods: {
    onConfirm(value) {
      this.form.education = value;
      this.showPicker = false;
    },
    onConfirmClass(value) {
      this.form.age = value;
      this.showPickerAge = false;
    },
    onSubmit() {
      let flag = true;
      for (let key in this.form) {
        if (!this.form[key]) {
          flag = false;
        }
      }
      if (flag) {
        this.form.studentId = this.form.userId;
        this.form.name = this.form.username;
        console.log(this.form)
        edit(this.form)
          .then(res => {
            console.log(res);
            if (res.code == 666) {
              Dialog.alert({
                message: "修改成功"
              });
            }
          })
          .catch(err => {
            console.log(err);
            // Dialog.alert({
            //   message: err.msg
            // });
          });
      } else {
        Dialog.alert({
          message: "还有选项没填"
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.rad {
  display: flex;
}
.nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  span {
    font-size: 14px;
    margin-left: 5px;
  }
}
</style>